<template>
  <div class="app-container">

    <!-- 圆环饼图 -->
    <el-row>
      <el-col :span="8">
        <div style="width: 400px;height:400px;background-color: white;" ref="chart3"></div>
      </el-col>
    </el-row>
    <h3>模拟记录</h3>
    <el-table ref="tables" v-loading="loading" :data="records">
      <el-table-column type="default" width="50" align=center />
      <el-table-column label="物品名称" align=center width=110 prop="cardName" />
      <!-- star show-->
      <el-table-column label="星级" align="center" width="100">
        <template slot-scope="scope">
          <!-- 使用repeat函数生成相应数量的☆ -->
          <span v-html="getStarHtml(scope.row.level)"></span>
        </template>
      </el-table-column>
      <el-table-column label="模拟类型" align=center width=110 prop="drawType" />
      <el-table-column label="模拟时间" align=center width=110 prop="drawTime" />
    </el-table>

    <!-- 如需分页 则还需要添加分页属性-->
    <!-- <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getRecord"
      /> -->

  </div>
</template>
<style></style>

<script>
import { getRecord } from "@/api/card/record";
import * as echarts from 'echarts';

export default {
  name: "card",
  data() {
    return {
      // 遮罩层 这个是没加载数据出来时候的转圈
      loading: true,
      // 全部卡列表？或者抽卡列表？或者当期卡列表
      records: []
    };
  },
  created() {
    this.getRecord();
    //this.getRingChart();
  },
  methods: {
    getRecord() {
      //查询排行榜
      getRecord().then(response => {
        this.records = response.data;
        //放开遮罩层
        this.loading = false;
        this.getRingChart();
      });
    },
    getStarHtml(level) {
      if (typeof level !== 'number' || level < 1) return '';
      // 创建一个包含level个☆字符的数组，然后join成字符串
      return Array.from({ length: level }, () => '☆').join('');
    },
    //圆环图
    getRingChart() {
      var acc = this.levelCounts();
      console.log
      var option = {
        title: {
          text: '抽卡历史',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: acc[3],
                name: '三星物品(' + (acc[3] / this.records.length * 100).toFixed(2) + '%)'
              },
              {
                value: acc[4],
                name: '四星物品(' + (acc[4] / this.records.length * 100).toFixed(2) + '%)'
              },
              {
                value: acc[5],
                name: '五星物品(' + (acc[5] / this.records.length * 100).toFixed(2) + '%)'
              },
              {
                value: acc[6],
                name: '六星物品(' + (acc[6] / this.records.length * 100).toFixed(2) + '%)'
              }
            ],
            radius: ['40%', '70%']
          }
        ]
      };
      echarts.init(this.$refs.chart3).setOption(option);
      //this.getLineChart();

    },
    levelCounts() {
      return this.records.reduce((acc, record) => {
        const level = record.level;
        if (acc[level]) {
          acc[level] += 1;
        } else {
          acc[level] = 1;
        }
        return acc;
      }, {});
    }
  },
  mounted() {
    //this.getRingChart();
  },
  computed: {


  }
};
</script>
